<template>
    <div  class="menu_container">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="updateTabStatus" :router="true">
        <!-- <el-menu-item > <span>{{path | pathname}}</span></el-menu-item> -->
      <el-menu-item index='/mill/millLease' > <span>矿机租赁</span></el-menu-item>
      <el-menu-item index='/mill/mymill'> <span>我的矿机</span></el-menu-item>
      <el-menu-item index='/mill/millEarnings'> <span>矿机收益记录</span></el-menu-item>
      
   
    </el-menu>
    </div>
</template>
<script>


export default {
    
    name: "Top-aside",
    data(){
        return{
            activeIndex: sessionStorage.getItem('mineTabStatus')||"/mill/millLease",
            showLoading: true,
            handleSelect:"",
            path:this.$router.history.current.path,
            pathname:this.$router.history.current.pathname
        }
    },
    created(){
            console.log(this.activeIndex);

        if(this.$route.fullPath != this.activeIndex){
            this.activeIndex = this.$route.fullPath;
        }
    },
    mounted(){
        // console.log(this.$router.history.current.path)
        // this.path = this.$router.history.current.path
    },
    watch:{
        '$route':function(to,from){
            console.log(1)
            console.log(to)
            this.activeIndex = to.path;
        },
        // activeIndex(val){
        //     console.log(val);
        //     sessionStorage.setItem('mineTabStatus',val)
        // }
    },
    filters:{
        pathname:(value)=>{
             if(!value) return value
              switch(value){
                    case "/mill/millLease":
                    return "矿机租赁";
                    break;
                    case "/mill/mymill":
                    return "我的矿机";
                    break;
                    case "/mill/millEarnings":
                    return "矿机收益记录";
                    break;
                    case "/mill/millAgreement":
                    return "矿机协议";
                    break;
                }
        }
    },

    methods:{
        updateTabStatus(key, keyPath){
            sessionStorage.setItem('mineTabStatus',key)
        }
    }
    
}
</script>
<style lang="scss" scoped>
.menu_container{
 min-height: calc(100% - 294px);
  padding: 30px 0 2px 0;
  width: 77%;
  margin: 0 auto;
  position: relative;

}
</style>